<!DOCTYPE HTML>
<html>
	<head>
		<link rel="stylesheet" href="lib/bootstrap.min.css">

		<title>ShareJS Examples</title>

		<style>

body {
	padding-top: 60px;
}

div .row {
  padding-bottom: 30px;
  padding-top: 30px;
}

.demo {
}

		</style>
	</head>

	<body>
	
    <div class="topbar">
      <div class="fill">
        <div class="container">
          <a class="brand" href="/">ShareJS</a>
          <ul class="nav">
<!--            <li class="active"><a href="#">Intro</a></li>-->
          </ul>
          <ul class="nav secondary-nav">
            <li class="active"><a href="demos.html">Demos</a></li>
            <li><a href="https://github.com/josephg/ShareJS/wiki">Documentation</a></li>
            <li><a href="https://github.com/josephg/ShareJS">Github</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container">
    
    <section id="intro">
      <div class="page-header"><h1>Demo Gallery</h1></div>
      <p>Demos. Lots of demos. <b>*neo glasses*</b></p>
      
      <p>View source on all these demos to see what they're made of. All the demos live in <a href="https://github.com/josephg/ShareJS/tree/master/examples">examples</a> in the source tree.</p>

      <div class="row">
        <div class="page-header"><h2>Simple demos</h2></div>
        <div class="span6 demo">
          <h2>Simple ace editor</h2>
          <p>Use the ace editor to edit the <code>'hello'</code> document</p>
          <p><a class="btn primary" href="hello-ace.html">Edit 'hello' &raquo;</a></p>
        </div>
        
        <div class="span5 demo">
          <h2>Simple textarea</h2>
          <p>Use a plain textarea to edit the <code>'hello'</code> document</p>
          <p><a class="btn primary" href="textarea.html">Edit 'hello' &raquo;</a></p>
       </div>
        
        <div class="span5 demo">
          <h2>Simple broadcast</h2>
          <p>Use the shout functionality to broadcast non-persistent messages</p>
          <p><a class="btn primary" href="shout.html">Start Shouting &raquo;</a></p>
       </div>
      </div>

      <div class="row">
        <div class="page-header"><h2>Read only examples</h2></div>
        
        <div class="span6 demo">
          <h2>Edit HTML content</h2>
          <p>Use the <code>'hello'</code> document contents as the text for a webpage</p>
          <p><a class="btn primary" href="hello-readonly.html">View 'hello' &raquo;</a></p>
        </div>
        
        <div class="span5 demo">
          <h2>HTML viewer</h2>
          <p>The <code>'html'</code> document is used as the innerHTML on the page. (You can edit it using the
          general editor, below.)</p>
          <p><a class="btn primary" href="readonly/html.html">View 'html' &raquo;</a></p>
        </div>
        
        <div class="span5 demo">
          <h2>Markdown viewer</h2>
          <p>View the <code>'markdown'</code> document, rendered to HTML using showdown. Edit the document using the editor.</p>
          <p><a class="btn primary" href="readonly/markdown.html">View 'markdown' &raquo;</a></p>
       </div>
      </div>
      
      <div class="row">
        <div class="page-header"><h2>More complex examples</h2></div>

        <div class="span6 demo">
          <h2>Static renderer</h2>
          <p>This example statically renders documents on the server. The page is
          completely static - there's no javascript at all. You can append document names
          to the URL to render them. The code for this demo is in 
          <a href="https://github.com/josephg/ShareJS/tree/master/examples/_static">examples/_static</a>.</p>
          <p><a class="btn primary" href="static/html">View 'html' &raquo;</a></p>
        </div>
        
        <div class="span5 demo">
          <h2>General Editor</h2>
          <p>This example shows the use of an Ace editor which can edit any ShareJS document. Documents
          are named with a string. Edit any of the documents which the demos above show.</p>
          <p><a class="btn primary" href="ace/">Edit anything &raquo;</a></p>
        </div>
        
        <div class="span5 demo">
          <h2>Wiki</h2>
          <p>This example demonstrates using ShareJS to implement a wiki. You can create documents on the fly by
          browsing to wiki/Anything. The code for this demo is in
          <a href="https://github.com/josephg/ShareJS/tree/master/examples/_wiki">examples/_wiki</a></p>
          <p><a class="btn primary" href="wiki/">Explore the wiki &raquo;</a></p>
       </div>
     </div>
       
      <div class="row">
        <div class="span6 offset2 demo">
          <h2>Pad</h2>
          <p>When you open this page, it creates a new empty editing pad with a random name (pad:XXXX).
          You can share the URL with someone else and edit with them.
          </p>
          <p><a class="btn primary" href="pad/">Edit a new pad &raquo;</a></p>
        </div>
        
        <div class="span6 demo">
          <h2>Pair programming editor</h2>
          <p>This is the same as the pad example (left), except ace has coffeescript styling on.</p>
          <p><a class="btn primary" href="code.html">Pair program &raquo;</a></p>
        </div>
      </div>

    <div class="row">
      <div class="page-header"><h2>JSON demos</h2></div>
        <p>ShareJS also supports concurrently editing JSON objects. The JSON OT spec is documented
        <a href="https://github.com/josephg/ShareJS/wiki/JSON-Operations">here</a> and you can
        read about the client API <a href="https://github.com/josephg/ShareJS/wiki/JSON-Client-API">here</a></p>
        <div class="span6 offset5 demo">
          <h2>Hex game</h2>
          <p>This is a complex game example. The game's state is stored in a JSON document.</p>
          <p><a class="btn primary" href="hex.html">Play the hex game &raquo;</a></p>
        </div>
			</div>
		</div>
	</body>
</html>	

